<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!-- Consider specifying the language of your content by adding the `lang` attribute to <html> -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
         More info: h5bp.com/i/378 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Weibo Demo</title>
    <meta name="description" content="Weibo demo">

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../js/vendor/jquery-ui/themes/base/jquery.ui.all.css">

    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

    <!-- All JavaScript at the bottom, except this Modernizr build.
         Modernizr enables HTML5 elements & feature detects for optimal performance.
         Create your own custom Modernizr build: www.modernizr.com/download/ -->
    <script src="../js/vendor/modernizr-2.5.3.min.js"></script>

    <style>
    .hidden {
        display: none;
    }

    .clearfix {
        clear: both;
    }

    nav ul {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }
    </style>
</head>
<body>
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
         chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

    <!-- Add your site or application content here -->

    <header>
      <h1 style="float: left">Weibo API Demo</h1>
      <div class="clearfix"></div>
    </header>

    <nav id="navigation">
      <ul>
        <li id="version">Unknown jQuery Version</li>
        <li id="ui-version">Unknown jQuery UI Version</li>
      </ul>
    </nav>

    <div id="main" role="main">
      <p>God helps those who help themselves.</p>
      <div id="toolbar">
          <label for="name">Name:</label> <input id="name" type="text" name="name" value="savageboy" />
          <button id="loadButton">Load Data</button>
          <span id="toggleGender">
            <input type="radio" id="all" name="gender" value="all" checked="checked" /><label for="all">All</label>
            <input type="radio" id="male" name="gender" value="male" /><label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female" /><label for="female">Female</label>
          </span>
      </div>
      <div id="content"></div>
    </div>

    <footer>
      <div>Copyright &copy; 2012. All rights reserved.</div>
    </footer>

    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.7.2.js"><\/script>')</script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="../js/vendor/jquery-ui-1.8.18.js"><\/script>')</script>

    <script src="../js/vendor/json2.js"></script>
    <script src="../js/vendor/require.js"></script>
    <script src="../js/vendor/d3.v2.js"></script>
    <script src="../js/vendor/jsrender.js"></script>

    <!-- scripts concatenated and minified via build script -->
    <script src="../js/plugins.js"></script>
    <script src="../js/utils.js"></script>

    <!-- sina weibo js sdk -->
    <script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=2837883501"></script>

    <!-- end scripts -->

    <script>
    // common used scripts here
    var utils = utils;

    function clearContent() {
        var area = jQuery("#content");
        area.html(null);
    }

    function appendContent(str) {
        var area = jQuery("#content");
        var oldContent = area.html();
        area.html(oldContent + str);
    }

    function showList(users) {
        var area = jQuery("#content");

        var lines = [];
        jQuery.each(users, function(index, user) {
            var line = utils.replace('<li><a id="user_{0}" href="http://weibo.com/u/{0}" target="_blank">{1}</a></li>', [user.id, user.name]);
            lines.push(line);
        });
        var content = utils.replace("<ol>{0}</ol>", [lines.join("")]);
        area.html(content);
    }
    </script>

    <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $("#version").html("jQuery: " + version);
        var uiVersion = $.ui.version;
        $("#ui-version").html("jQuery UI: " + uiVersion);

        // button
        $("button").button();
        $("#toggleGender").buttonset();

        var weibo = {};

        var filterGender = function() {
            var friends = weibo.friends;
            var gender = $("input:radio[name=gender]:checked").val();

            if (gender === "male") {
                friends = jQuery.grep(friends, function(friend, index) {
                    return friend.gender === "m";
                });
            } else if (gender === "female") {
                friends = jQuery.grep(friends, function(friend, index) {
                    return friend.gender === "f";
                });
            }

            // show result
            showList(friends);
        };
    // --------------------------------------------------------------
        $("#all").click(filterGender);
        $("#male").click(filterGender);
        $("#female").click(filterGender);

        // auto complete
        $("#name").autocomplete({
            minLength: 2,
            source: function(request, response) {
                var term = request.term;

                // search
                WB2.anyWhere(function(W) {
                    W.parseCMD("/search/suggestions/users.json", function(data, status) {
                        if(status == true) {
                            var names = jQuery.map(data, function(user) {
                                return user["screen_name"];
                            });
                            response(names);
                        }
                    }, {
                        "q": term,
                        "count": 10
                    }, {
                        method: "GET"
                    });
                });
            }
        });

        $("#loadButton").click(function() {
            // weibo app key
            var appkey = "2837883501";

            var name = $("#name").val();

            WB2.anyWhere(function(W) {
                // 
                W.parseCMD("/friendships/friends.json", function(data, status) {
                    if(status == true) {
                        var users = weibo.friends = data.users;
                        filterGender();
                    }
                }, {
                    "screen_name": name,
                    "count": 200
                }, {
                    method: "GET"
                });
            });
        });
    });
    </script>
</body>
</html>
